<template>
<div class="login-container">

    <div class="login-close-help">
        <span class="close-page" @click="router.go(-1)">✕</span>
        <span class="help-page" @click="entryHelp">帮助</span>
    </div>

    <div class="login-title">
        <h2>登录开启智慧生活</h2>
    </div>

    <div class="login-phone" v-if="loginType === 1">
        <form class="phone-code" @submit.prevent="phoneLogin">
            <div class="form-group">
                <input type="number" id="phone" maxlength="11" placeholder="请输入手机号码" v-model="phone" required />
                <span class="close-text" v-if="isClean" @click="cleanPhone">✕</span>
            </div>
            <div class="form-group">
                <input type="number" maxlength="6" id="verify" placeholder="请输入验证码" v-model="verify" required />
                <span class="qr-code" @click="getQrCode">获取验证码</span>
            </div>
            <button type="submit">登录/注册</button>
        </form>
        <div class="use-user-login">
            <span @click="loginType=2">使用账号密码登录 ❯</span>
        </div>
    </div>

    <div class="login-user" v-if="loginType === 2">
        <form class="user-pwd" @submit.prevent="userLogin">
            <div class="form-group">
                <input type="text" id="username" v-model="username" placeholder="请输入手机号码" required />
            </div>
            <div class="form-group">
                <input type="text" id="password" v-model="password" placeholder="请输入登录密码" required />
            </div>
            <button type="submit">登录</button>
        </form>
        <div class="use-verify-login">
            <span @click="forgetPassword" class="forget-password">忘记密码</span>
            <span @click="loginType=1" class="use-verify">使用验证码登录 ❯</span>
        </div>
    </div>

    <div class="login-wx-qq">
        <span @click="wechatLogin">
            <img src="/public/images/wechat.svg" />
        </span>
        <span @click="qqLogin">
            <img src="/public/images/qq.svg" />
        </span>
    </div>

    <div class="login-protocol">
        <input type="checkbox" id="checkbox" v-model="radioValue" class="checkbox-round" @click="selectAgree" />
        <span>勾选表示同意<a>《xx智能家居服务条款》</a>和<a>《个人信息保护政策》</a>。第三方授权信息仅为快捷登录使用，首次登录仍需获取您的手机号码进行身份验证。</span>
    </div>
</div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

    const loginType = ref(1);

    const route = useRoute();
    const router = useRouter();

    const username = ref('');
    const phone = ref('');
    const password = ref('');
    const verifycode = ref('');

    const isClean = ref(false);

    // onMounted(() => {
    //     if (username.value.trim() !== '') {
    //         isClean.value = true;
    //     }
    // });

    const cleanPhone = () => {
        phone.value = '';
    }

    watch(phone, () => {
        if(phone.value.trim() !== '' && phone.value.trim() !== null) {
            isClean.value = true;
        } else {
            isClean.value = false;
        }
    });

    // 手机号码登录
    const phoneLogin = () => {
        console.log("登录信息：", phone.value, verifycode.value);
    }

    // 用户名密码登录
    const userLogin = () => {
        // 这里可以添加登录逻辑，例如发送请求到后端
        console.log('登录信息', username.value, password.value);
        // 假设登录成功，可以跳转到主页
        // router.push('/home');
    }

    // 获取验证码
    const getQrCode = () => {
        //获取发送的手机号
        if (phone.value === null || phone.value === '') {
            alert("手机号码不能为空");
            return;
        } else if(phone.value.length !== 11) {
            alert("不合法的手机号码，请核对！");
            return;
        }
        alert("已发送短信到" + phone.value);
    }

    // 帮助页
    const entryHelp = () => {
        alert("跳转帮助页");
        route.push({name: "help"});
        // router.back();
    }

    // 忘记密码
    const forgetPassword = () => {
        alert("跳转找回密码页面" + radioValue.value);
    }

    const radioValue = ref(false);
    //勾选协议
    const selectAgree = () => {
        if (radioValue.value) {
            radioValue.value = false;
        } else {
            radioValue.value = true;
        }
    }

   //微信登陆
   const wechatLogin = () => {
        alert("协议勾选：" + radioValue.value);
   }

   //QQ登录
   const qqLogin = () => {
        alert("协议勾选：" + radioValue.value);
   }


</script>

<style scoped>
.login-container {
    width: 100%;
    background-color: #fff;
    padding-top: 20px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* 垂直居中子元素 */
    justify-content: center; /* 水平居中子元素，如果需要 */
    height: 100%; /* 确保父元素有确定的高度 */
}

/*关闭和帮助*/
.login-close-help {
    width: 100%;
    height: 25px;
}
.close-page {
    float: left;
    margin-left: 20px;
    cursor: pointer;
}
.help-page {
    font-size: 16px;
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

/*登录的标题*/
.login-title {
    width: 90%;
    margin: 10% auto;
}
.login-title h2 {
    text-align: left;
}

/*手机号码登录*/
.login-phone {
    width: 100%;
    margin: 10% auto;
}
.phone-code {
    width: 100%;
    margin: auto;
}
.form-group {
    width: 90%;
    margin: 20px auto;
}
.form-group .close-text {
    position: absolute;
    font-size: 12px;
    left: 88%;
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background-color: #cccccc;
    cursor: pointer;
    margin-top: 10px;
}
.form-group .qr-code {
    position: absolute;
    font-size: 13px;
    width: 80px;
    left: 73%;
    border-radius: 50px;
    padding: 10px auto;
    cursor: pointer;
    margin-top: 10px;
}

/*输入框*/
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 50px;
    box-sizing: border-box;
}
.form-group-verify {
    width: 90%;
}
/*用户手机登录与注册*/
.phone-code button,.user-pwd button {
    width: 90%;
    padding: 10px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    margin: auto 5px;
    background-color: #5cb85c;
    color: white;
}

/*按钮样式：使用账号密码登录*/
.use-user-login {
    width: 90%;
    text-align: right;
    margin: 10px auto;
}

.use-user-login span {
    font-size: 13px;
    cursor: pointer;
    margin-right: 10px;
}

.login-user {
    width: 100%;
    margin: 10% auto;
}

/*按钮样式：使用验证码登录*/
.use-verify-login {
    width: 90%;
    margin: 10px auto;
    font-size: 12px;
}
.use-verify-login .forget-password {
    float: left;
    margin-left: 10px;
    cursor: pointer;
}
.use-verify-login .use-verify {
    float: right;
    margin-right: 10px;
    cursor: pointer;
}

/*使用微信或qq登录*/
.login-wx-qq {
    width: 90%;
    bottom: 150px;
    position: absolute;
}
.login-wx-qq span {
    margin: auto 20px;
    cursor: pointer;
}
.login-wx-qq img {
    width: 25px;
    height: 25px;
}

/*协议*/
.login-protocol {
    width: 90%;
    margin: auto;
    text-align: left;
    bottom: 30px;
    position: absolute;
}
.login-protocol span{
    font-size: 13px;
}

.checkbox-round {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #666666; /* 边框颜色 */
    border-radius: 50%; /* 圆形边框 */
    width: 15px; /* 宽度 */
    height: 15px; /* 高度 */
    outline: none;
    cursor: pointer;
    position: relative;
    top: 5px;
    background-color: #ffffff; /* 默认背景颜色 */
}

.checkbox-round:checked {
    background-color: #6d9eeb; /* 选中后的背景颜色 */
}

.checkbox-round:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-10%, -30%) rotate(-45deg);
    width: 7px; /* 对号勾选标记的宽度 */
    height: 3px; /* 对号勾选标记的高度 */
    border: 2px solid #ffffff; /* 对号勾选标记的边框颜色 */
    border-top: none;
    border-right: none;
    transform-origin: bottom left;
}
</style>